<template>
  <div>
    <div class="content">
      <el-form
        ref="userFormRules"
        :rules="userFormRules"
        :model="userForm"
        label-width="80px"
        size="mini"
      >
        <el-form-item label="账号" prop="username">
          <el-input v-model="userForm.username"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="userForm.name"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pass">
          <el-input v-model="userForm.pass" type="password" />
        </el-form-item>
        <el-form-item label="确认密码" prop="check_pass">
          <el-input v-model="userForm.check_pass" type="password" />
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="userForm.sex">
            <el-radio label="1">男</el-radio>
            <el-radio label="0">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="userForm.phone"></el-input>
        </el-form-item>
        <!-- <el-form-item label="籍贯">
          <el-input v-model="userForm.native_place"></el-input>
        </el-form-item>
        <el-form-item label="出生年月">
          <el-date-picker
            v-model="userForm.birth"
            type="month"
            placeholder="选择"
          >
          </el-date-picker>
        </el-form-item> -->
        <!-- <el-form-item label="角色" prop="roles">
          <el-checkbox-group v-model="userForm.roles">
            <el-checkbox
              v-for="item in roles"
              :key="item.id"
              :label="item.id"
              name="roles"
              >{{ item.name }}</el-checkbox
            >
          </el-checkbox-group>
        </el-form-item> -->
        <el-form-item style="text-align: right">
          <el-button type="primary" @click="onSubmit">确定</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { create } from "../../api/register";
// import { query as roleQuery } from "../../api/role";
import dayjs from "dayjs";
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.userForm.check_pass !== "") {
          this.$refs.userFormRules.validateField("check_pass");
        }
        callback();
      }
    };
    var validateCheckPass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.userForm.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      userForm: {},
      userFormRules: {
        username: [{ required: true, message: "请输入账号", trigger: "blur" }],
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        pass: [{ validator: validatePass, trigger: 'blur' }],
        check_pass: [{ validator: validateCheckPass, trigger: 'blur' }],
        // roles: [{ required: true, message: "请选择角色", trigger: "blur" }],
      },
      // roles: [{}],
    };
  },
  // created() {
  //   this.roleQuery();
  // },
  methods: {
    // roleQuery() {
    //   roleQuery().then((res) => {
    //     if (res.success) {
    //       this.roles = res.data;
    //     }
    //   });
    // },
    create() {
      create(this.userForm)
        .then((res) => {
          if (res.success) {
            // console.log(this.userForm);
            this.$message({ message: "注册成功！", type: "success" });
          } else {
            this.$message.error(res.data);
            //这里如果账号已经存在，则注册失败
          }
        })
        .catch(() => this.$message.error("注册失败！"));
    },
    onSubmit() {
      this.$refs.userFormRules.validate((valid) => {
        if (valid) {
          this.create();
          this.$router.push("/login");
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  width: 300px;
  margin: auto;
  position: relative;
  top: 100px;
  border: 1px gainsboro solid;
  padding: 10px;
}
</style>